<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { clearToken } from './utils/token'
import { useUserStore } from './stores'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// const userRouter = userStore.userRouter

const loginOut = () => {
  userStore.clearUserInfo()
  clearToken()
  router.push('/login')
}
</script>

<template>
  <!-- 顶部导航显示 -->
  <!-- route.meta.showRoute判读当前路由是否显示公共导航栏 -->
  <el-header v-if="route.meta.showRoute">
    <h3>小黑子</h3>
    <el-menu
      :default-active="route.path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <template v-for="item in userStore.userRouter" :key="item.path">
        <MenuItem v-if="item.meta?.showRoute" :item="item" />
      </template>
    </el-menu>
  </el-header>

  <!-- <el-button type="primary" @click="loginOut">退出</el-button> -->
  <!-- 路由视图窗口 -->
  <RouterView />
</template>

<style lang="scss" scoped>
.el-header {
  padding: 0px;
  display: flex;
  background-color: $hd-bg;

  h3 {
    line-height: 58px;
    width: 200px;
    text-align: center;

    color: $hd-tx;
    border-bottom: 1px solid var(--el-menu-border-color);
  }

  .el-menu-demo {
    flex: 1;
  }
}
</style>
